<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>FatOscillator</title>

		<meta
			name="viewport"
			content="width=device-width, initial-scale=1, maximum-scale=1"
		/>
		<link
			rel="icon"
			type="image/png"
			sizes="174x174"
			href="./favicon.png"
		/>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js"></script>
		<link
			href="https://fonts.googleapis.com/css?family=Material+Icons&display=block"
			rel="stylesheet"
		/>
		<script src="../build/Tone.js"></script>
		<script src="./js/tone-ui.js"></script>
		<script src="./js/components.js"></script>
	</head>
	<body>
		<style type="text/css">
			tone-play-toggle {
				margin-bottom: 10px;
			}
		</style>
		<tone-example label="Supersaw">
			<div slot="explanation">
				<a
					href="https://tonejs.github.io/docs/latest/classes/FatOscillator"
					>Tone.FatOscillator</a
				>
				creates multiple oscillators and detunes them slightly from each
				other to thicken the sound. The <code>count</code> parameter
				sets the number of oscillators and <code>spread</code> sets the
				total spread (in cents) between the oscillators. <br /><br />
				FatOscillator is also available in
				<a
					href="https://tonejs.github.io/docs/latest/classes/OmniOscillator"
					>Tone.OmniOscillator</a
				>
				by prefixing another type with "fat", then use the count and
				spread to control the number and detune of the oscillators. To
				create a "supersaw":
				<code>omniOscillator.type = "fatsawtooth"</code>. <br /><br />
				<a href="http://www.midiworld.com/files/1121/"
					>Jump by Van Halen MIDI</a
				>
				converted using
				<a href="https://tonejs.github.io/Midi/">@tonejs/midi</a>
			</div>

			<div id="content">
				<tone-play-toggle></tone-play-toggle>
			</div>
		</tone-example>

		<script type="text/javascript">
			const synth = new Tone.PolySynth(Tone.Synth, {
				oscillator: {
					type: "fatsawtooth",
					count: 3,
					spread: 30,
				},
				envelope: {
					attack: 0.01,
					decay: 0.1,
					sustain: 0.5,
					release: 0.4,
					attackCurve: "exponential",
				},
			}).toDestination();

			// Van Halen - Jump MIDI from http://www.midiworld.com/files/1121/
			// converted using
			const part = new Tone.Part(
				(time, note) => {
					synth.triggerAttackRelease(
						note.noteName,
						note.duration,
						time,
						note.velocity
					);
				},
				[
					{
						time: "192i",
						noteName: "G4",
						velocity: 0.8110236220472441,
						duration: "104i",
					},
					{
						time: "192i",
						noteName: "B4",
						velocity: 0.7874015748031497,
						duration: "104i",
					},
					{
						time: "192i",
						noteName: "D5",
						velocity: 0.8031496062992126,
						duration: "104i",
					},
					{
						time: "480i",
						noteName: "G4",
						velocity: 0.7559055118110236,
						duration: "104i",
					},
					{
						time: "480i",
						noteName: "C5",
						velocity: 0.6850393700787402,
						duration: "104i",
					},
					{
						time: "480i",
						noteName: "E5",
						velocity: 0.6771653543307087,
						duration: "104i",
					},
					{
						time: "768i",
						noteName: "F4",
						velocity: 0.8661417322834646,
						duration: "104i",
					},
					{
						time: "768i",
						noteName: "A4",
						velocity: 0.8346456692913385,
						duration: "104i",
					},
					{
						time: "768i",
						noteName: "C5",
						velocity: 0.8188976377952756,
						duration: "104i",
					},
					{
						time: "1056i",
						noteName: "F4",
						velocity: 0.7007874015748031,
						duration: "104i",
					},
					{
						time: "1056i",
						noteName: "A4",
						velocity: 0.6850393700787402,
						duration: "104i",
					},
					{
						time: "1056i",
						noteName: "C5",
						velocity: 0.6614173228346457,
						duration: "104i",
					},
					{
						time: "1248i",
						noteName: "G4",
						velocity: 0.6771653543307087,
						duration: "104i",
					},
					{
						time: "1248i",
						noteName: "B4",
						velocity: 0.6771653543307087,
						duration: "104i",
					},
					{
						time: "1248i",
						noteName: "D5",
						velocity: 0.7165354330708661,
						duration: "104i",
					},
					{
						time: "1440i",
						noteName: "G4",
						velocity: 0.8818897637795275,
						duration: "248i",
					},
					{
						time: "1440i",
						noteName: "B4",
						velocity: 0.84251968503937,
						duration: "248i",
					},
					{
						time: "1440i",
						noteName: "D5",
						velocity: 0.8818897637795275,
						duration: "248i",
					},
					{
						time: "1728i",
						noteName: "G4",
						velocity: 0.8267716535433071,
						duration: "104i",
					},
					{
						time: "1728i",
						noteName: "C5",
						velocity: 0.8031496062992126,
						duration: "104i",
					},
					{
						time: "1728i",
						noteName: "E5",
						velocity: 0.8188976377952756,
						duration: "104i",
					},
					{
						time: "2016i",
						noteName: "F4",
						velocity: 0.7086614173228346,
						duration: "104i",
					},
					{
						time: "2016i",
						noteName: "A4",
						velocity: 0.7244094488188977,
						duration: "104i",
					},
					{
						time: "2016i",
						noteName: "C5",
						velocity: 0.7007874015748031,
						duration: "104i",
					},
					{
						time: "2208i",
						noteName: "C4",
						velocity: 0.9921259842519685,
						duration: "296i",
					},
					{
						time: "2208i",
						noteName: "F4",
						velocity: 0.968503937007874,
						duration: "200i",
					},
					{
						time: "2208i",
						noteName: "A4",
						velocity: 0.9606299212598425,
						duration: "208i",
					},
					{
						time: "2400i",
						noteName: "E4",
						velocity: 0.7559055118110236,
						duration: "104i",
					},
					{
						time: "2400i",
						noteName: "G4",
						velocity: 0.7007874015748031,
						duration: "104i",
					},
					{
						time: "2592i",
						noteName: "C4",
						velocity: 0.968503937007874,
						duration: "488i",
					},
					{
						time: "2592i",
						noteName: "D4",
						velocity: 0.9448818897637795,
						duration: "488i",
					},
					{
						time: "2592i",
						noteName: "G4",
						velocity: 0.937007874015748,
						duration: "488i",
					},
				]
			).start(0);

			part.loop = true;
			part.loopEnd = "4m";

			Tone.Transport.bpm.value = 132;

			drawer().add({
				tone: synth,
			});

			// bind the interface
			document
				.querySelector("tone-play-toggle")
				.addEventListener("start", () => Tone.Transport.start());
			document
				.querySelector("tone-play-toggle")
				.addEventListener("stop", () => Tone.Transport.stop());
		</script>
	</body>
</html>
